<!DOCTYPE html>
<html>
    <head>
        <title>form</title>
        <script>
           
             var E=new Array();
             var i=0 ;var j=0; 
            function chargerPays(){
                E[0]= new Array(2);
                E[1]= new Array(2);
                E[0][0]=new Option( " Tunisie", " Tunisie " );
                E[0][1]=new Option( " France", " France " );
                E[1][0]=new Option( " Tunis", " Tunis " );
                E[1][1]=new Option( " Paris", " Paris " );
                var select = document.getElementById('select');
                var i ,j =0;
                for(i=0;i<2;i++){
                    for(j=0;j<2;j++){
                select.add(E[i][j]);
                }
                }
                afficherCapitals()
            }
            
            function afficherCapitals(){
                 for(j=0;j<2;j++){
                E[0][j].style.display='none';
                }
                
                  for(j=0;j<2;j++){
                E[1][j].style.display='block';
                }
            }
            
            function afficherPays(){
                for(j=0;j<2;j++){
                E[1][j].style.display='none';
                }
                  for(j=0;j<2;j++){
                E[0][j].style.display='block';
                }
            }
           
            window.onload=chargerPays;
        </script>

        
        <style type="text/css">
            p{
                font-weight: 100;
                color: red;
            }
            p.normal{
                font-weight: 100;
                color: red;
            }
            p.gras{
                font-weight: 100;
                color: blue;
            }
            
        </style>
    </head>

    <body>
        <form name="formpay" >
            <p class="normal">HI</p>
            <p class="gras">HI</p>
            <select id="select" size="6" style="width: 100px;"></select>

            <input id="p" type="button" value="afficher pays" onClick="afficherPays();">
            <input id="c" type="button" value="afficher capitals" onClick="afficherCapitals();">

        </form>




    </body>
</html>